<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<script src="/static/js/jquery-1.11.1.min.js"></script>
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">网点列表</div>
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;margin-top: 10px;">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="padding-right: 8px; padding-left:0; width: 60px">网点编号</label>
                            <input class="layui-input" name="orgCode" id="orgCode" placeholder="网点编号"
                                   autocomplete="off">
                        </div>
                        <div class="layui-inline" style="margin-left:40px">
                            <label class="layui-form-label" style="padding-right: 8px; padding-left:0; width: 30px">省份</label>
                            <input class="layui-input" name="shengfen" id="shengfen" placeholder="所在省份"
                                   autocomplete="off">
                        </div>
                        <div class="layui-inline" style="margin-left:40px">
                            <label class="layui-form-label" style="padding-right: 8px; padding-left:0; width: 30px">月份</label>
                            <input type="text" name="yuefen" placeholder="选择月份"
                                   autocomplete="off" class="layui-input" id="yuefen">
                        </div>
                        <div class="layui-inline" style="margin-left:40px">
                            <label class="layui-form-label" style="padding-right: 8px; padding-left:0; width: 30px">评级</label>
                            <input type="text" name="rank" placeholder="选择评级"
                                   autocomplete="off" class="layui-input" id="rank">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <button class="layui-btn" style="margin-left:10px;" data-type="reload">搜索</button>
                        <button class="layui-btn" style="margin-left:20px;" data-type="export">导出</button>
                    </div>
                    <table id="info_table" lay-filter="info_table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var shengfen1 = [[${shengfen}]];
    var field1 = [[${field}]];
    var order1 = [[${order}]];
    var yuefen1 = [[${yuefen}]];
    var rank1 = [[${rank}]];
    layui.use(['table', 'element', 'laydate', 'layer'], function () {
        var table = layui.table, element = layui.element;
        var laydate = layui.laydate;


        //执行一个laydate实例
        laydate.render({
            elem: '#yuefen' //指定元素
            ,type: 'month'
        });

        table.render({
            elem: '#info_table',
            url: '/orgList?shengfen1='+shengfen1+'&field1='+field1+'&order1='+order1+'&yuefen1='+yuefen1+'&rank1='+rank1,
            method: 'post',
            toolbar: false,
            skin: 'line',
            // toolbar: '#toolbar',
            // ,defaultToolbar: ['filter', 'print']
            cellMinWidth: 80,
            page: true,
            autoSort: false,
            cols: [
                [
                    // {type: 'checkbox', fixed: 'left'},
                    {field: 'orgCode', title: '网点编号', width:95, align: "center"},
                    {field: 'yuefen', title: '月份', width:90, sort: true, align: "center"},
                    {field: 'shengfen', title: '省份', width:90, align: "center"},
                    {field: 'shangquanf', title: '静态效率评分', width:130, sort: true, align: "center"},
                    {field: 'type', title: '当前规模', width:110, align: "center"},
                    {field: 'rank', title: '评级', width:80, templet:'#rankColor', align: "center"},
                    {field: 'rank3', title: '同规模评级', width:120, templet:'#rankColor2', align: "center"},
                    {field: 'incCoef', title: '趋势激励系数', width:120, align: "center"},
                    {field: 'dynamicEff', title: '动态效率评分', width:130, sort: true, align: "center"},
                    {field: 'averageAge', title: '派送时效', width:110, sort: true, align: "center"},
                    {field: 'avgDeliveryCountRate', title: '当日派件率', width:120, sort: true, align: "center"},
                    {field: 'laborProductivity', title: '劳动生产率', width:120, sort: true, align: "center"},
                    {field: 'dailyMaxWaybillCount', title: '最大派送能力', width:140, sort: true, align: "center"},
                    {field: 'deliveryRate', title: '人员利用率', width:120, sort: true, align: "center"},
                    {field: 'workload', title: '工作负荷', width:110, sort: true, align: "center"},
                    {field: 'tool_field', fixed: 'right', title: '操作', align: "center", templet: function (d) {
                            var orgCode = d.orgCode;
                            return operate(orgCode);
                        }, width: '12%'},

                ]
            ]
        });

        // 获取本用户收藏列表
        var orgCodeCollected;
        $ = layui.$;  // 否则$未初始化
        $.ajax({
            url: '/orgCodeListCollected',
            async: false,
            type: "POST",
            success: function (data) {
                data = $.parseJSON(data);
                orgCodeCollected = data.orgCodeListCollected;
            }
        });

        // 动态设置操作栏
        function operate(code) {
            var content = '<a style="color: #1D54C2" lay-event="xiangqing">详情</a>';
            for (var i = 0; i < orgCodeCollected.length; i++) {
                if (orgCodeCollected[i] === code) {
                    content += '<a style="color: #C9C9C9; margin-left:20px">已收藏</a>'
                    return content;
                }
            }
            content += '<a style="color: #1D54C2;margin-left:20px" lay-event="collect">收藏&nbsp&nbsp&nbsp&nbsp</a>'
            return content;
        }



        // 搜索
        var $ = layui.$, active = {
            reload: function () {
                var orgCode = $('#orgCode');
                var shengfen = $('#shengfen');
                var yuefen = $('#yuefen');
                var rank = $('#rank');
                //执行重载
                table.reload('info_table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        // 变量名要和数据库一致
                        org_code: orgCode.val(),
                        shengfen: shengfen.val(),
                        yuefen: yuefen.val(),
                        rank:rank.val()
                    }
                });
            },
            export: function () {
                table.exportFile("info_table", null, 'xls');
            },
        };

        $('.test-table-reload-btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(info_table)', function (obj) {
            var data = obj.data;

            if (obj.event === 'xiangqing') {
                var url = '/evaluate?type=zonghe&orgCode=' + data.orgCode + '&yuefen=' + data.yuefen;
                parent.layui.index.openTabsPage(url, "网点综合评价");
            }

            else if (obj.event==='collect'){
                // push进去reload的时候可以同步更改toolbar
                orgCodeCollected.push(data.orgCode);
                layer.msg('收藏成功');
                table.reload('info_table', {
                    where: {
                        orgCode: data.orgCode,
                        collection: 1
                    }
                });

            }
        });


        table.on('sort(info_table)', function (obj) {
            table.reload('info_table', {
                initSort: obj //记录初始排序
                , where: {
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });

        });


    });

</script>
<script type="text/html" id="rankColor">
    {{#  if(d.rank == 'A'){ }}
    <span style="color: #07ff00;">{{ d.rank }}</span>
    {{#  }else if(d.rank == 'B'){ }}
    <span style="color: #ffcf25;">{{ d.rank }}</span>
    {{#  }else if(d.rank == 'C'){ }}
    <span style="color: #ff0000;">{{ d.rank }}</span>
    {{#  }else{ }}
    <span style="color: #0041ff;">{{ d.rank }}</span>
    {{#  } }}
</script>

<script type="text/html" id="rankColor2">
    {{#  if(d.rank3 == 'A'){ }}
    <span style="color: #07ff00;">{{ d.rank3 }}</span>
    {{#  }else if(d.rank3 == 'B'){ }}
    <span style="color: #ffcf25;">{{ d.rank3 }}</span>
    {{#  }else if(d.rank3 == 'C'){ }}
    <span style="color: #ff0000;">{{ d.rank3 }}</span>
    {{#  }else{ }}
    <span style="color: #0041ff;">{{ d.rank3 }}</span>
    {{#  } }}
</script>

</body>
<style>
    .layui-table-cell{
        height:54px;
        line-height: 30px;
        padding-top: 12px;
    }
</style>
</html>
